li{ list-style: none}
*{font-family: "微软雅黑"}
/* Swipe 2 required styles */
.clear{ clear: both}
.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    _width:500px;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap div { background-repeat: no-repeat; background-size: cover; background-position: center center;
    float:left;
    width:100%;
    height: 150px;
    position: relative;
}
#pager { position: absolute; bottom: 4px; right: 0; width: 80px;}
#pager em{display: block; float: left; vertical-align: middle; margin:0 4px; padding: 2px; width: 12px; height: 12px; text-align: center; line-height: 12px;
    font-size: 9px; border-radius:50%; color: #333; font-style: normal; background: #cdced3}
#pager em.on{color: #fff; background: #393a4b}
/* END required styles */
.weui-tab__panel{ background: #f3f2f1}
header{ display: flex; align-items: center; background:#383949 url("../images/head-bg.png") no-repeat center center;  background-size: cover;}
header .l, header .r, header .c{ padding: 4px 10px; height: 32px;}
header .l, header .r{width: 15%;}
header .r{ text-align: right}
header .c{width:70%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; font-size: 20px;}
header .c img{ margin-right: 10px; width: 32px; height: auto;}
.delete{  background-image: url("../images/close.png");}
.menu{  background-image: url("../images/menu.png");}
.top-home{  background-image: url("../images/top-home-gray.png");}
.top-menu .active .top-home{background-image: url("../images/top-home-red.png");}
.top-pro{  background-image: url("../images/top-pro-gray.png");}
.top-menu .active .top-pro{background-image: url("../images/top-pro-red.png");}
.top-tip{  background-image: url("../images/top-tip-gray.png");}
.top-menu .active .top-tip{background-image: url("../images/top-tip-red.png");}
.top-user{  background-image: url("../images/top-home-gray.png");}
.top-menu .active .top-user{background-image: url("../images/top-user-red.png");}
.tab-home{  background-image: url("../images/home-light.png");}
.weui-bar__item_on .tab-home{  background-image: url("../images/home-dark.png");}
.tab-car{  background-image: url("../images/car-light.png");}
.weui-bar__item_on .tab-car{  background-image: url("../images/car-dark.png");}
.tab-category{  background-image: url("../images/category-light.png");}
.weui-bar__item_on .tab-category{  background-image: url("../images/category-dark.png");}
.tab-user{  background-image: url("../images/user-light.png");}
.weui-bar__item_on .tab-user{  background-image: url("../images/user-dark.png");}
.thin-back{ background-image: url("../images/thin-back.png");}
.thin-home{ background-image: url("../images/thin-home.png");}
.note{background-image: url("../images/note.png");}
.love{background-image: url("../images/love.png");}
.sun{background-image: url("../images/sun.png");}
.go-out{background-image: url("../images/go-out.png");}
.order{background-image: url("../images/order.png");}
.card{background-image: url("../images/card.png");}
.share{background-image: url("../images/share.png");}
.qr{background-image: url("../images/qr.png");}
.msg{background-image: url("../images/msg.png");}
.record{background-image: url("../images/record.png");}
.history-order{background-image: url("../images/history-order.png");}
.set{background-image: url("../images/set.png");}
.help{background-image: url("../images/help.png");}
.exit{background-image: url("../images/exit.png");}
.edit{background-image: url("../images/edit.png");}
.vip{background-image: url("../images/vip.png");}
.tab-icon{display: inline-block; width: 27px; height: 27px; background-repeat: no-repeat; background-position: center center; background-size: contain;}
.icon{ margin: 4px 0; display: inline-block; width: 22px; height: 22px; background-repeat: no-repeat; background-position: center center; background-size: contain;}
.contract-icon{margin: 10px 0; display: inline-block; width: 52px; height: 52px; background-repeat: no-repeat; background-position: center center; background-size: contain;}
.s-icon{margin: 4px 0; display: inline-block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center center; background-size: contain;}
.weui-tabbar{ position: fixed}
.weui-bar__item_on .weui-tabbar__label{ color: #383949 !important;}
.top-menu{ display: flex; align-items: center;padding: 5px 12px; background: #fff;}
.top-menu li{ width: 25%; text-align: center;}
.top-menu li p{ color: #383949; font-size: 14px}
.top-menu .active p{ color: #b30000}

.pro-list-container{ padding: 15px 0; width: 100%; overflow-x: hidden }
.search{ display: flex; align-items: center; margin: 0 20px; height:28px;border: 1px solid #383949; border-radius: 11px; background: #fff;}
.search input{ width: 75%; display: inline-block; height: 28px; padding: 4px 4px 4px 35px; background: url("../images/search.png") no-repeat 5px 2px;
border:0; background-size: auto 95%}
.search input:focus{outline: none}
.search a{ width: 25%; height:28px;  background: #383949; color: #fff; border-radius: 0 8px 8px 0; text-align: center;}
.pro-list-container ul{padding: 10px; margin-right: -15px;}
.pro-list-container ul li{float: left;width: 49%;}
.pro-list-container ul li a{ display: block; padding: 0 0 10px 0; margin: 10px 10px 0 0; background: #fff;}
.pro-list-container ul li .pro-img{ width: 100%; height: 140px; background-size: cover; background-position:  center center; background-repeat: no-repeat;}
.pro-list-container ul li p{ padding: 0 5px;}
.pro-list-container ul li p.title{ height: 22px; line-height: 22px; overflow: hidden; font-size: 14px; font-weight: bold; color: #222;}
.pro-list-container ul li p.price{ font-size: 16px; color: #b30000; }
.pro-list-container ul li p.price span{ float: right; width: 24px; height: 24px; border-radius: 50%; background: #b30000 url("../images/car-white.png") no-repeat center center;
    background-size: 95% auto}

.page-header{ display: flex; align-items: center; background: #ebedee;}
.page-header .l, .page-header .r, .page-header .c{ padding: 4px 10px; height: 28px;}
.page-header .l, .page-header .r{ width: 15%;}
.page-header .r{ text-align: right}
.page-header .c{width: 70%;}
.page-header .c h3{font-size: 16px; text-align: center; height: 30px; line-height: 30px; color: #666; font-weight: normal}
.contract-list{ margin-bottom: 15px;}
.contract-list li{ position: relative;  margin: 15px 15px 0 15px; background: #f6f6f6; display: flex; align-items: stretch; overflow:hidden;
    -moz-box-shadow:0px 2px 7px #e2e2e2; -webkit-box-shadow:0px 2px 7px #e2e2e2; box-shadow:0px 2px 7px #e2e2e2;}
.contract-list li .box{ display: flex; align-items: stretch; width: 100%; }
.contract-list li .box .l{border-right: 1px dotted #c6c6c6; }
.contract-list li .box .r{border-left: 1px dotted #c6c6c6; display: flex; flex-direction: column; align-items: center; justify-content: center;  }
.contract-list li .box .r p{ font-size: 14px; color: #d20001}
.contract-list li .box .l, .contract-list li .box .r{width: 25%; text-align: center}
.contract-list li .box .c{ width: 50%;}
.contract-list li .box .c h4{ padding: 0 10px; color: #000; height: 45px; line-height: 45px; font-size: 18px;  font-weight: normal; border-bottom: 1px dotted #c6c6c6; }
.contract-list li .box .c p{ display: flex; align-items: center; font-size: 14px; padding:  0 10px;}
.contract-list li .box .c p span{ width: 10%;}
.contract-list li .box .c p em{ padding: 5px; width: 90%; font-style: normal; line-height: 16px;}
.contract-list li .corner{ position: absolute; display: block;}
.contract-list li .corner.lt{ background: #d20001; left: -20px; top: -17px;  width: 35px; height: 35px;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg); 	/* IE 9 */
    -moz-transform:rotate(45deg); 	/* Firefox */
    -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
    -o-transform:rotate(45deg);}
.icon-bg{background-color: #d20001;
    border-radius: 3px;}

.category-page-content{ display: flex; margin-left: -1px; overflow-x: hidden}
.category-page-content .category-box{ width: 20%; margin-top: 20px;}
.category-page-content .category a{ display: block; height: 32px; line-height: 32px; text-align: center; color: #626262; background: #fafafa; font-size: 14px;
    border: 1px solid #d6d6d6; margin-top: -1px;}
.category-page-content .category a.active{ color: #d20001; background: #fff; border: 0;}
.category-page-content ul{width: 80%}
.category-fixed{position:  fixed;
    width: 75px; top: 140px;transition: all .5s ease;  -webkit-transition: all .5s ease
}
.tip{ display: inline-block; width: 15px; height: 15px; border-radius: 50%;  background: #d20001; color: #fff; text-align: center; line-height: 15px; font-size: 12px;}
.weui-cell__bd p{ padding-left: 10px;}
.mt10{ margin-top: 10px;}
.weui-cell{ background: #fff}
.bg-box{ background: #fff;}
.user-contaner{ display: flex; align-items: center; margin: 0 15px; padding: 10px 0; position: relative; border-bottom: 1px solid #e8e8e8;}
.user-contaner .l{ width: 35%; display: flex; align-items: center; justify-content: center;}
.user-contaner .l .avatar{ width: 60px; height: 60px; border-radius:30px; background-size: cover; background-position:center; background-repeat: no-repeat;}
.user-contaner .user-info{ width: 65%;}
.user-contaner .user-info h4{display: flex; height: 35px; line-height: 35px; align-items: center;  font-size: 18px; font-weight: normal;}
.user-contaner .user-info .sign a{ padding: 0 10px; font-size: 14px; width: 80px; border-radius: 12px; height: 24px; line-height: 24px; display: flex; align-items: flex-start; background: #f3653f; color: #fff;}
.user-contaner .user-info .credits{ height: 30px; line-height: 30px;font-size: 14px; color: #999;}
.user-contaner .user-info .credits span{color: #f3653f}